<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery基本选择器</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>

    <script type="text/javascript">
          function fun1(){

              var $obj =  $("#one");
              $obj.css("background-color","green");
          }

          function fun2(){

             var $obj =  $(".two");
              //将jquery对象包含的所有的Dom对象的背景颜色设置红色
             $obj.css("background-color","red");
          }

        function fun3(){

             var $obj = $("div");
            $obj.css("background-color","pink");
        }

          function fun4(){
              $("*").css("background-color","black");
          }

        function fun5(){

            $("#one,span").css("background-color","yellow");
        }

    </script>
    <style type="text/css">
        div{
            background: gray;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--定义被选择对象-->
    <div id="one" class="two"></div><br>
    <div class="two"></div><br>
    <div></div><br>
    <span>我是span标签</span>



    <br>
    <!--定义按钮-->
    <input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()"/>
    <input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()"/>
    <input type="button" id="btn03" value="选择所有div元素"  onclick="fun3()"/>
    <input type="button" id="btn04" value="选择所有元素" onclick="fun4()"/>
    <input type="button" id="btn05" value="选择id为one与所有span元素" onclick="fun5()"/>
</body>
</html>